<template>
	<view class="wrapper bg-linear h-full ">
		<view class="bg-color border-r-10 boder-r-10  borderl">
			<view class="flex-s-c wrapper ">
				<view>
					<van-image width="220rpx" height="220rpx" radius="20rpx"
						:src="item.image_text" />
				</view>
				<view class="p-l-20 flex">
					<view class="t-18 t-bold p-b-10">{{item.title}}</view>
					<view class="t-12 p-b-10"><text class="color7 t-bold">{{item.star}}分</text><text
							class="p-l-6 color">{{item.label}}</text></view>
					<view class="t-12 color8 p-b-14">{{item.tags}}</view>
					<view class="flex-b-c">
						<view>
							<text class="color9 t-12 t-bold">￥</text>
							<text class="color9 t-18 t-bold">{{item.price}}</text>
							<text class="color4 t-12">起</text>
						</view>
						<view>
							<van-button type="primary" size="small" color="#f79a13"
								custom-style="border-radius:5px" @click="makePhone(item.mobile)" >电话预定</van-button>
						</view>
					</view>
				</view>
			</view>
			<view class="color6 p-15">
				<text class="color4 t-16">备注：{{item.remarks}}</text>
			</view>
			
			<view class="color6 address">
				<view class="t-18 p-b-12 t-bold">酒店位置：</view>
				<view class="t-16">{{item.address}}</view>
			</view>
			<view class="color6 wrapper">
				<rich-text :nodes="item.content"></rich-text>
			</view>
		</view>
		
		
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from 'vue'
	import {
		getHotelDetail
	} from '@/api/index.js'
	const id = ref('');
	const item = ref();
	//校圈列表
	
	const getList = () => {
		getHotelDetail({
			id: id.value
			
		}).then(res => {
			// 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
			item.value=res.data;
			console.log(item.value)
		}).catch(res => {
			// 如果请求失败写paging.value.complete(false)，会自动展示错误页面
			// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
			// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
		})
	}
const makePhone=(tel)=>{
		uni.makePhoneCall({
			phoneNumber: tel //仅为示例
		});
	}
	onLoad((options) => {
		id.value = options.id
		getList()
	})
</script>

<style scoped>
.address{
	margin-left: 30rpx;
}
.borderl{
	height: 100%;
	border: 1rpx solid #e8f2ff;
	margin-bottom: 30rpx;
	box-shadow: 0px 0px 6px 0px #f1f2f3;
}
</style>